<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

</body>
<script>
    // async 函数
    // ES2017 标准引入了 async 函数，使得异步操作变得更加方便。

    // 1. 什么是异步函数(async函数)  => 可以理解为通过Promise对函数进行了封装 => 根据的执行结果 Promise实例 (return => Promise <fulfilled:1>  出错 =>  Promise <rejected:2>)

    // 普通函数
    // function fn() {
    //     return 1;
    // }
    // var result = fn();
    // console.log(result);

    // 异步函数
    // async function fn() {
    //     // return 1; // Promise <fulfilled:1>

    //     throw 2;  // Promise <rejected:2>
    // }
    // var result = fn();
    // console.log(result);



    // 2. 它如何能让异步操作变得更加方便 (前提:异步操作,需要用Promise封装)
    // await 关键词 在async函数中使用 => 等异步操作有结果(状态改变)之后 获取对应的数据 

    // T = T1 + T2 + T3;
    // async function fn() {
    //     var num1 = await getNumAsync(1, true, 2000); // Promise实例 => 2s后变为已成功 => 1
    //     console.log(num1);

    //     var num2 = await getNumAsync(2, true, 3000); // Promise实例 => 3s后变为已成功 => 2
    //     console.log(num2);

    //     var num3 = await getNumAsync(3, true, 1000); // Promise实例 => 1s后变为已成功 => 3
    //     console.log(num3);

    //     return num1 + num2 + num3;
    // }

    // var p = fn();
    // p.then(data => {
    //     console.log(data);
    // })


    // ----------------------

    var p1 = getNumAsync(1, true, 2000);
    var p2 = getNumAsync(2, true, 3000);
    var p3 = getNumAsync(3, true, 1000);

    async function fn() {
        var num1 = await p1;
        console.log(num1);
        var num2 = await p2;
        console.log(num2);
        var num3 = await p3;
        console.log(num3);
    }

    fn();


    // Promise封装的异步操作 
    function getNumAsync(val, isFulfilled = true, delay = 1000) {
        var p = new Promise(function (resolve, reject) {
            setTimeout(function () { // 1s后 变为 成功/失败状态 
                isFulfilled ? resolve(val) : reject(val);
            }, delay);
        })
        return p; // Promise <pending>
    }


</script>

</html>